<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>


<script type="text/javascript" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>

</head>
<body>
	<div id="app">
		<h1>不带参数get请求</h1>
		<img v-for=" p in list" :src="'../'+p.image" height="100px">
		<h1>带参数get请求</h1>
		<span>{{prod.pname}}</span>
		<button @click="query">查询1号商品</button>
		
	</div>
	<script type="text/javascript">
		var v = new Vue({
			el :"#app",
			data : { 
				list : [],
				prod : {}
			},
			created(){
				// get 方法返回 promise
				let promise = axios.get("../hot.s");
				console.info("======1========")
				// then 是收到响应之后执行的方法
				promise.then(
					// function(res){
					// 改成箭头函数
					res=>{
						// function ==> 1.定义函数  2.定义类
						console.info(res.data);
						console.info(this.list)
						this.list = res.data;
					}
				);
				console.info("======2========")
			},
			methods:{
				query(){
					/* 
					    get 方式
						axios.get("../detail.s",{
						// get 请求的参数
						params : { pid : 1 }	
					}).then(res=>{
						this.prod = res.data;
					}) */
					// post 方式
					let param = new URLSearchParams();
					param.append("pid", 2);
					axios.post("../detail.s", param).then(res=>{
						this.prod = res.data;
					})
				}
			}
		})
	
	</script>
	

</body>
</html>